<template>
  <div class="index">
    <img class="bgIndex" src="../assets/index.png" alt />
    <div class="centerContent">
      <Alert>选择如何开始游戏</Alert>
      <Button type="primary" style="margin:40px 5px;" @click="create">创建房间</Button>
      <Button type="primary" style="margin:40px 5px;" @click="join">加入房间</Button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted(){
    localStorage.removeItem('creator')
    localStorage.removeItem('hostId')
    localStorage.removeItem('hostSetting')
    localStorage.removeItem('nightMsg')
  },
  methods: {
    create(){
      this.$router.push('/create')
    },
    join(){
      this.$router.push('/join')
    }
  }
};
</script>
<style scoped>
.index {
  position: relative;
  overflow: hidden;
}
.bgIndex {
  height: 100vh;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.centerContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* height: 200px; */
  width: 95%;
  max-width: 680px;
  background: rgba(255,255,255,.7);
  border-radius: 5px;
  padding: 20px;
}
</style>